import { Menu,message,Avatar,Popover,Progress,Button} from 'antd';
import { PaperClipOutlined } from '@ant-design/icons';
import React, {useState} from 'react';
import {useHistory} from 'react-router-dom';
import Zform from './registForm';
import Zmodal from './loginModal';
import logoimg from "../static/logo.png";

const {SubMenu} = Menu;

export function Zheader() {

    const history = useHistory();
    const [visible1,setVisible1] = useState(false);
    const [visible2,setVisible2] = useState(false);
    const [visible3,setVisible3] = useState(localStorage.getItem('usershow'));
    const progresscolor = {
        '0%': '#D8BFD8',
        '20%': '#EE82EE',
        '40%': '#FF00FF',
        '70%': '#BA55D3',
        '100%': '#9932CC',
    };
    const usercard = (
        <div style={{"textAlign":"center"}}>
            <Progress percent={50} size={'small'} strokeColor={progresscolor} status="active"/>
            <hr color="#666666"/>
            <Button>修改资料</Button>
            <hr color="#999990"/>
            <Button onClick={()=>{userexit()}}>退出</Button>
        </div>
    );

    const userexit = async ()=>{
        await localStorage.removeItem('token');
        await history.push('/');
        localStorage.removeItem('usershow');
        setVisible3(false);

    };

    return (
        <div>
            <Menu mode="horizontal">
                <Menu.Item key="hduhouse">
                    <a href={'http://localhost:3333/'}>
                        <img src={logoimg} style={{"width":"5vw","height":"5vh"}}/>
                    </a>
                </Menu.Item>
                <Menu.Item key="regist" onClick={()=>{setVisible1(true)}} style={{"float":"right"}}>
                    注&nbsp;册
                </Menu.Item>
                { visible3 ?
                    <Menu.Item key="user" style={{"float":"right"}}>
                        <Popover content={usercard} title={'用户等级:'+ 1}>
                            <Avatar src={require("../static/1.png")} onClick={async ()=>{
                                await localStorage.setItem('usershow',false);
                                history.push('/userhome');
                            }
                            }/>
                        </Popover>
                    </Menu.Item>
                    :
                    <Menu.Item key="login" onClick={()=>{setVisible2(true)}} style={{"float":"right"}}>
                        登&nbsp;陆
                    </Menu.Item>
                    }
                <SubMenu key="system" icon={<PaperClipOutlined />} title="相关连接">
                    <Menu.ItemGroup title="管院平台">
                        <Menu.Item key="system:1">
                            <a href={"https:www.zzys.zone"}>数据结构演示</a>
                        </Menu.Item>
                        <Menu.Item key="system:2">
                            <a href={"https://cm.qiancaoyu.fun"}>竞赛报名管理</a>
                        </Menu.Item>
                    </Menu.ItemGroup>
                    <Menu.ItemGroup title="个人博客">
                    </Menu.ItemGroup>
                </SubMenu>
            </Menu>
            <Zform hideregist={()=>{setVisible1(false)}} formvisible={visible1}/>
            <Zmodal hidelogin={()=>{setVisible2(false);
            message.info('您已取消登陆',1);} }
            showUser = {(x)=>{
                setVisible2(x);
                setVisible3(!x)}}
            modalvisible={visible2}
            />
        </div>
    )

}

